<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool-视频服务</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>

    <style>

        HTML, BODY {
            height: 100%;
            overflow:hidden;
            background-color: #fafafa;
        }

        .login-box {
            width: 800px;
            height: 400px;
            left: 50%;
            margin-left: -400px;
            top: 15%;
            /*padding: 20px;*/
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            position: absolute;
            background-color: #fff;
        }

        .left-logo {
            width: 300px;
            background-image: url("/static/login-slide.jpg");
            background-size: cover;
        }

        .login-form {
            padding: 40px;
            flex: 1;
        }

        .login-button {
            width:100%;
            margin-top: 16px;
            font-size: 18px;
            font-weight: normal;
            border-radius: 26px !important;
            padding: 16px 0px !important;
        }

        .el-input input {
            padding: 22px 12px !important;
            font-size: 16px;
        }

        .bottom-container {
            color: #666;
            font-size: 12px;
            text-align: center;
            position: absolute;
            bottom: 18px;
            left: 0px;
            right: 0px;
        }

        .login-title {
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;;
        }

        .small-logo {
            font-size: 36px;
            font-family: Arial;
            margin-left: 12px;
            color: #606266;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="login-box">
        <div class="left-logo"></div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
            <div class="login-title">
                <img src="/static/icon.png" width="38" height="38">
                <span class="small-logo">ZTool 用户登录</span>
            </div>
            <el-form-item prop="username">
                <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名"
                          name="username" type="text" clearable auto-complete="off">
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input ref="password" v-model="loginForm.password" clearable show-password placeholder="请输入密码" name="password" @keyup.enter.native="handleLogin"/>
            </el-form-item>

            <el-button :loading="loading" type="primary" class="login-button" round
                       @click.native.prevent="handleLogin">登 录</el-button>
        </el-form>
    </div>
    <div class="bottom-container">
        © 2021 ZTool视频流服务 匠人智慧(江苏)科技有限公司 - Craftsman. All Rights Reserved.
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loginForm: {
                    username: "",
                    password: ""
                },
                loginRules: {
                    username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
                    password: [{ required: true, trigger: "blur", message: "请输入密码" }]
                },
                loading: false,
            }
        },

        methods: {
            //登录
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        // 添加流
                        this.loading = true
                        axios.post('/login',
                            Qs.stringify(this.loginForm)
                        ).then(res => {
                            if (res.data) {
                                let data = res.data;
                                if (data.code === 0) {
                                    //保存用户登录成功得星系
                                    sessionStorage.setItem("token", data.data.token)
                                    sessionStorage.setItem("user", data.data.name)
                                    window.location.href = "/"
                                } else {
                                    this.loading = false
                                    this.$message.error(data.msg);
                                }
                            }
                        }).catch(res => {
                            this.loading = false
                            this.$message.error(res.message);
                        });
                    }
                })
            },
        }
    })
</script>
</html>